<template>
    <div class="customer">
      <van-nav-bar
          title="丹能销售订单列表"
          left-arrow
          left-text="返回"
          @click-left="back"
      />
      <van-search
          v-model="fbillno"
          shape="round"
          show-action
          background="#57a3f3"
          placeholder="请输入单据编号"
      >
        <template #action>
          <van-button round  size="small" type="info" @click="onSearch(1)" style="width: 60px;">查询</van-button>
        </template>
      </van-search>
      <div style="width: 100%;height: 100%;background: #ffffff;margin-top: 10px">
        <van-list style="overflow: scroll">
          <div class="listColumn">
            <div>日期</div>
            <div>购货单位</div>
            <div>单据编号</div>
            <div>客户合同号</div>
          </div>
          <div class="listItem" v-for="(task, index) in taskList" :key="index" @click="toDetail(task)">
            <div>{{ task.ftime }}</div>
            <div>{{ task.fbuyer }}</div>
            <div>{{ task.fbillno }}</div>
            <div>{{ task.PO }}</div>
          </div>
        </van-list>
      </div>
      <div>
        <van-pagination v-model="pageNo" mode="simple" :total-items="total" :show-page-size="6" :items-per-page="pageSize" force-ellipses @change="changePg">
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination>
      </div>

    </div>
  </template>
  <script>
  import { mapState } from 'vuex'
  import { dnGetTaskList } from '@/api/api'
  import { Notify } from 'vant'

  export default {
    name: "dnSalesOrderList",
    components: {
    },
    data () {
      return {
        loading: false,
        fbillno: '', // 单据编号
        pageNo:1,
        total: 0, // 总页数
        pageSize: 20, //每页显示条数
        taskList: []
      }
    },
    computed: {
      ...mapState({
        openId: state => state.user.openId
      })
    },
    mounted() {
    },
    created () {
      this.getList(1)
    },
    methods: {
      changePg () {
        this.getList(this.pageNo)
      },
      onSearch (pageNo) {
        this.getList(pageNo)
      },
      getList (pageNo) {
        dnGetTaskList({
          fbillno: this.fbillno,
          open_id: this.openId,
          pageNo: pageNo,
          pageSize: this.pageSize
        }).then(res => {
          if (res.success) {
            this.taskList = res.result.records
            this.total = res.result.total
          }else {
            Notify({ type: 'danger', message: res.message, duration: 4000 })
          }

        })
      },
      //详情
      toDetail(task) {
        this.$router.push({
          name: 'dnSalesOrderDetail',
          params: {
            id: task.id
          }
        })
      },
      back () {
        this.$router.push({name: 'modules'})
      },
    }
  }
</script>

<style scoped>
  .customer{
    min-height: 100vh;
    background: #ffffff;
  }
  .listColumn{
    width: 700px;
    display: flex;
    line-height: 45px;
    background: #eee;
  }
  .listColumn div:nth-of-type(1) {
    width: 100px;
  }
  .listColumn div:nth-of-type(2) {
    width: 300px;
  }
  .listColumn div:nth-of-type(3) {
    width: 150px;
  }
  .listColumn div:nth-of-type(4) {
    width: 150px;
  }
  .listItem{
    width: 700px;
    display: flex;
    line-height: 38px;
    border-bottom: 1px solid #eeeeee;
  }
  .listItem div:nth-of-type(1) {
    width: 100px;
  }
  .listItem div:nth-of-type(2) {
    width: 300px;
  }
  .listItem div:nth-of-type(3) {
    width: 150px;
  }
  .listItem div:nth-of-type(4) {
    width: 150px;
  }
</style>